<template>
    <div class="Dialog">
        <el-dialog
            title="添加认证所需信息"
            :visible.sync="dialogVisible"
        >
            <el-form
                ref="form"
                :model="form"
                label-width="80px"
            >
                <el-form-item label="信息名称">
                    <el-input v-model="form.infoName"></el-input>
                </el-form-item>

                <el-form-item label="信息所属">
                   <el-select v-model="form.belong" @change="chooseBelong" style="float: left">
                        <el-option
                            v-for="(item, index) in allBelong"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>   
                    </el-select> 
                </el-form-item>

                <el-form-item label="信息类型">
                   <el-select v-model="form.infoType" style="float: left" no-data-text="请先选择信息所属">
                        <el-option
                            v-for="(item, index) in allType"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled" 
                        >
                            
                        </el-option>   
                    </el-select> 
                </el-form-item>

                <el-form-item label="证件图标" v-if="form.infoType === 'image'">
                   <el-select v-model="form.iconName" style="float: left">
                        <el-option
                            v-for="(item, index) in allIcon"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        >
                            <span class="iconfont" :class="item.value" style="color: gray"></span>
                            <span style="color: gray; font-size: .25rem">{{ item.label }}</span>
                        </el-option>   
                    </el-select> 
                </el-form-item>

                <el-form-item label="可选值" v-if="form.infoType === 'enum'">
                    <div class="enum-box">
                        <el-input 
                        v-for="(item, index) in form.chooseValue"
                        :key="index"
                        v-model="form.chooseValue[index]"
                        style="width: 120px;margin:0 0 10px 10px"
                        ></el-input>
                       <i @click="addEnumValue" class="el-icon-circle-plus-outline" style="cursor: pointer;font-size: 30px;margin: 5px 0 0 10px"></i>
                       <i @click="reduceEnumValue" class="el-icon-remove-outline" style="cursor: pointer;font-size: 30px;margin: 5px 0 0 10px"></i>
                    </div>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="confirm">添加</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>


<script>
export default {
    name: 'Dialog',
    data () {
        return {
            dialogVisible: false,
            allType: [
                { label: '文字类型', value: 'text', disabled: false },
                { label: '可选列表', value: 'enum', disabled: false },
                { label: '日期类型', value: 'date', disabled: false  },
                { label: '身份证号类型', value: 'idcard', disabled: false },
                { label: '数字类型', value: 'number', disabled: false },
                { label: '图片类型', value: 'image', disabled: false }],
            allBelong: [],
            allIcon: [
                { label: '身份证正面', value: 'icon-shenfenzheng'},
                { label: '身份证背面', value: 'icon-shenfenzheng1'},
                { label: '其他证书', value: 'icon-pingzhengmingxi'}
            ],
            form: {
                chooseValue: [],
                infoType: '',
                infoName: '',
                belong: ''
            }
        }
    },
    methods: {
        
        chooseBelong(e) {
           var allType = this.allType; 
           if (e === 'photo') {
               for (let i = 0; i < allType.length; i ++) {
                   allType[i].disabled = allType[i].value !== 'image';
               }
           }
           else {
               for (let i = 0; i < allType.length; i ++) {
                   allType[i].disabled = allType[i].value === 'image';
               }
           }
           this.form.infoType = '';
           
            
        },
        checkForm () {
            var form = this.form;
            for (var i in form) {
                if (!form[i])
                    return false;
                if (i === 'infoType' && form.infoType === 'enum' && form.chooseValue.length === 0)
                    return false;
                if (i === 'infoType' && form.infoType === 'image' && !form.iconName) 
                    return false;
            }
            return true;
        },
        confirm () {
           if (!this.checkForm()) {
               this.$message({
                   message: '请填写完整',
                   type: 'warning'
               });
               return ;
           }
           this.$emit('submit', this.form);
           this.dialogVisible = false;
           this.form = {
                chooseValue: [],
                infoType: '',
                infoName: '',
                belong: ''
           }
        },
        cancel () {
            this.dialogVisible = false;
            this.form = {
               chooseValue: []
           }
        },
        show (param) {
            if (!param) {
                this.allBelong = [ { label: '基本信息', value: 'basic'}];
            }
            else {
                this.allBelong = [
                { label: '专家信息', value: 'expert'},
                { label: '证件信息', value: 'photo'}];
            }
            this.dialogVisible = true;
            this.form = {
                chooseValue: [],
                infoType: '',
                infoName: '',
                belong: ''
            };
            
        },
        addEnumValue () {
            this.form.chooseValue.push('')
        },
        reduceEnumValue () {
            this.form.chooseValue.pop()
        }
    }
}
</script>

<style lang="stylus" scoped>
    .Dialog 
        width 100%
        .enum-box
            width 100%
            display flex
            flex-wrap wrap
            
            
            
  
           
</style>

